<template>
  <el-card class="my-card">
  <div class="programme-wrap">
    <!--<header>-->
    <!--  <span>调整方案清单</span>-->
    <!--</header>-->
    <section>

      <el-form ref="queryForm" :model="queryParams" label-width="68px">
        <el-row :gutter="20">
        <el-col :md="8" :lg="6">
        <el-form-item lable-width="68px"
          label="方案编号"
          prop="planCode"
          style=""
        >
          <el-input
            v-model="queryParams.planCode"
            placeholder="请输入方案编号"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        </el-col>
        <el-col :md="8" :lg="6">
        <el-form-item label="方案名称" prop="planName">
          <el-input
            v-model="queryParams.planName"
            placeholder="请输入方案名称"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        </el-col>
        <el-col :md="8" :lg="6">
        <el-form-item label="方案状态" prop="status">
          <el-select
            v-model="queryParams.status"
            placeholder="请选择方案状态"
            clearable
          >
            <el-option
              v-for="dict in dict.type.plan_status"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        </el-col>
        <el-col :md="8" :lg="6">
        <el-form-item label-width="20px">
          <el-button
            type="primary"
            icon="el-icon-search"
            size="small"
            @click="handleQuery"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="small" @click="resetQuery"
            >重置</el-button
          >
        </el-form-item>
        </el-col>
        </el-row>
      </el-form>


      <el-table v-loading="dataLoading" :data="programmeData" stripe style="width: 100%">
        <el-table-column prop="planCode" label="编号" width="300">
        </el-table-column>
        <el-table-column prop="planName" label="方案名称" min-width="150">
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template slot-scope="scope">
            <dict-tag
              :options="dict.type.plan_status"
              :value="scope.row.status"
            />
          </template>
        </el-table-column>
        <el-table-column prop="effectTime" label="生效时间" width="180">
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180">
        </el-table-column>
        <el-table-column label="操作" width="160">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              plain
              @click="handleDetail(scope.row)"
              >详情</el-button
            >
            <el-button
              size="mini"
              type="text"
              plain
              v-show="scope.row.status !== '1'"
              @click="handleEdit(scope.row)"
              >修改</el-button
            >
            <el-button
              size="mini"
              type="text"
              plain
              v-show="scope.row.status !== '1'"
              @click="handleImplement(scope.row)"
              >生效</el-button
            >
            <el-button
              size="mini"
              type="text"
              plain
              v-show="scope.row.status !== '1'"
              style="color: red"
              @click="handleDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        :page-sizes="[5, 10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :current-page.sync="queryParams.pageNum"
        :page-size.sync="queryParams.pageSize"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </section>
  </div>
  </el-card>
</template>

<script>
import {
  deletePlan,
  listPlanPage,
  getNewTempId,
  effectPlan,
  queryEffectFile,
} from "@/api/modules/plans";
export default {
  name: "Plans",
  dicts: ["plan_status"],
  data() {
    return {
      programmeData: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        planName: "",
        planCode: "",
        status: "",
      },
      total: 0,
      tempVersionId: "",
      handleType: "edit",
      dataLoading: false,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.dataLoading = true
      listPlanPage(this.queryParams).then((response) => {
        this.programmeData = response.rows;
        this.total = response.total;
        this.dataLoading = false
      });
    },
    handleEdit(data) {
      console.log("dataaaaaa", data);
      getNewTempId({ planId: data.id }).then((res) => {
        this.tempVersionId = res.data.tempId;
        localStorage.setItem("tempId", this.tempVersionId);
        localStorage.setItem("version", res.data.version);
        this.$router.push({
          path: "/orgad/detailed",
          query: {
            planId: data.id,
            tempId: this.tempVersionId,
            planCode: data.planCode,
            planName: data.planName,
            createTime: data.createTime,
            remark: data.remark,
            handleType: "edit",
          },
        });
      });
    },
    handleDetail(data) {
      getNewTempId({ planId: data.id }).then((res) => {
        this.tempVersionId = res.data.tempId;
        localStorage.setItem("tempId", this.tempVersionId);
        localStorage.setItem("version", res.data.version);
        this.$router.push({
          path: "/orgad/detailed",
          query: {
            planId: data.id,
            tempId: this.tempVersionId,
            planCode: data.planCode,
            planName: data.planName,
            createTime: data.createTime,
            remark: data.remark,
            handleType: "detail",
          },
        });
      });
    },
    handleImplement(data) {
      this.$confirm("是否将此方案的调整内容生效？", "方案生效", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          queryEffectFile({ planId: data.id }).then((res) => {
            if (res.data) {
              effectPlan(data.id).then((response) => {
                if (response.code === 200) {
                  this.$message.success("方案已生效");
                  this.getList();
                }
              });
            } else {
              this.$message({
                message: "该方案无法生效，请上传生效依据文件！",
                type: "warning",
              });
            }
          });
        })
        .catch(() => {});
    },
    handleDelete(data) {
      this.$confirm(
        "点击确认后，此方案会被永久删除, 请确认此项操作？",
        "删除方案",
        {
          confirmButtonText: "确认",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          deletePlan(data.id).then((response) => {
            if (response.code === 200) {
              this.$message.success("删除成功");
              this.getList();
            }
          });
        })
        .catch(() => {});
    },
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 20,
        planName: "",
        planCode: "",
        status: "",
      };
      this.getList();
    },
    handleSizeChange(val) {
      this.queryParams.pageNum = 1;
      this.queryParams.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.getList();
    },
  },
};
</script>
<style lang="scss" scoped>
.programme-wrap {
  header {
    display: flex;
    align-items: center;

    & > span {
      font-size: 24px;
      font-weight: 500;
      margin-bottom: 10px;
    }

    .el-button {
      margin-left: 30px;
    }
  }
  section {
   /* margin: 20px 20px 0;*/
  }
}
</style>
